<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* .list li:not(.red){background: pink} */
        #msg{width: 100px;height: 100px;}
        .border{border: solid 2px black}
        /* .red{background: red} */
    </style>
</head>
<body>
    <div id="msg" class="border red">hello</div>
    <div id="cont">1</div>
    <div id="cont">2</div>
    <div id="cont">3</div>
    <p style="display:none">段落1</p>
    <p>段落2</p>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="list">
        <li>html</li>
        <li>javascript</li>
        <li>css</li>
        <li>php</li>
        <li></li>
        <li class="red">node</li>
        <li>mysql</li>
        <li>python</li>
    </ul>
    <em>a</em>
    <em class="mark">b</em>
    <em>c</em>
    <em>d</em>
    <div class="msg">
        <div class="xbox">
            <h2>二级标题1</h2>
            <h2 class="mark">二级标题2</h2>
        </div>
        <h2>二级标题3</h2>
        <h2>二级标题4</h2>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>9-2</span>
    <span class="mark">9-3</span>
    <span>9-4</span>
    <div abc="hello">10</div>
    <div abc="hello" qwe>11</div>
    <div abc="hello" qwe="world">12</div>
    <div abc="hello" qwe="hahah">13</div>
    <div abc="hello" qwe="hahah" asd>14</div>
    <div abc="hello" qwe="hahah" asd>15</div>
</body>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script>
    
    // $(".msg h2").css("background","red")
    // $(".msg").find("h2").css("background","red")


    // $(".msg>h2").css("background","red")
    // $(".msg").children("h2").css("background","red")


    // $(".msg+span").css("background","red")
    // $(".msg").next("span").css("background","red")


    // $(".msg~span").css("background","red")
    // $(".msg").nextAll("span").css("background","red")


    // $(".list li:first").css("background","red")
    // $(".list li").first().css("background","red")
    

    // $(".list li:last").css("background","red")
    // $(".list li").last().css("background","red")
    

    // $(".list li:eq(2)").css("background","red")
    // $(".list li").eq(2).css("background","red")


    // $(".list li:even").css("background","red")
    // 新版本添加
    // $(".list li").even().css("background","red")
    

    // $(".list li:odd").css("background","red")
    // 新版本添加
    // $(".list li").odd().css("background","red")


    // $(".list li:not(.red)").css("background","red")
    // $(".list li").not(".red").css("background","red")


    // $(".list:has(.red)").css("border","solid 2px red")
    // $(".list").has(".red").css("border","solid 2px red")


    // 以下过滤器没有选择器对应
    // $(".msg").prev("em").css("background","red")
    // $(".msg").prevAll("em").css("background","red")
    // $(".msg").prevUntil(".mark").css("background","red")
    
    // $(".msg").nextUntil(".mark").css("background","red")

    // $(".msg").siblings().css("background","red")

    // $("h2.mark").parent().css("border","solid 2px red")
    // $("h2.mark").parents().css("border","solid 2px red")
    // $("h2.mark").parentsUntil("body").css("border","solid 2px red")

    // end()上一步选择器
    // $(".list").find("li").css("background","red").eq(6).css("border","solid 2px blue").end().css("color","yellow")

</script>
</html>